import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { AddVMSService } from '../../add-vms.service';
import { DisseminationService } from '../../../../dissemination-management.service';
import { Subject, Subscription, fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, takeUntil, concatAll, filter } from 'rxjs/operators';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { ToolsService } from 'app/shared/service';

@Component({
    selector: 'itmp-add-vms-message-template',
    templateUrl: './template.component.html',
    styleUrls: ['./template.component.css']
})
export class TemplateComponent implements OnInit, OnDestroy {
    search$ = new Subject<string>();
    listOfData: any[] = [];
    keyword: string;
    subscripions: Subscription[] = [];
    isShowVietName = false;

    constructor(public addService: AddVMSService, private diss: DisseminationService, private tools: ToolsService) {}

    ngOnInit() {
        this.searchPipeSet();
        this.getData();
        if (localStorage.getItem('itmp_lang') === 'vi') {
            this.isShowVietName = true;
        } else {
            this.isShowVietName = true;
        }
    }

    ngOnDestroy() {
        this.subscripions.forEach(item => {
            item.unsubscribe();
        });
    }

    getData() {
        this.keyword = this.keyword === '' ? null : this.keyword;
        const params = {
            condition: {
                template_id: null,
                device_type: null,
                template_name: this.keyword
            },
            pageNum: 1,
            pageSize: 1000000
        };
        this.diss.getTemplateList(params).subscribe(res => {
            const content = res.data;
            if (!content) {
                this.listOfData = [];
                return;
            }
            this.listOfData = content.content;
            // console.log( this.listOfData,"拿到的数据");
        });
    }

    // 防抖函数注册
    searchPipeSet() {
        const subscripion = this.search$.pipe(debounceTime(1000), distinctUntilChanged()).subscribe((kw: any) => {
            this.getData();
        });
        this.subscripions.push(subscripion);
    }

    // 搜索(防抖)
    onSearch(): void {
        this.search$.next(this.keyword);
    }

    clickTR(data) {
        if (!data.templatePages || !data.templatePages.length) {
            return;
        }
        const tp = data.templatePages[0];
        this.addService.setShowPage(0);
        this.addService.setTemplate(data);
        const templatePages = [];
        const templateGraphics = [];
        const templateTexts = [];
        (tp.templateGraphics || []).forEach(tg => {
            const page = tg.pageSeq - 1;
            if (!templateGraphics[page]) {
                templateGraphics[page] = [];
            }
            templateGraphics[page].push(this.tools.isClone(tg));
        });
        (tp.templateTexts || []).forEach(tt => {
            const page = tt.pageSeq - 1;
            if (!templateTexts[page]) {
                templateTexts[page] = [];
            }
            templateTexts[page].push(this.tools.isClone(tt));
        });
        const pages = Math.max(templateGraphics.length, templateTexts.length);
        if (pages > 0) {
            for (let i = 0; i < pages; i++) {
                const temp = {
                    pageSeq: i + 1,
                    graphics: [],
                    texts: [],
                    // templateId: item.templateId,
                    templateGraphics: templateGraphics[i],
                    templateTexts: templateTexts[i]
                };
                templatePages.push(temp);
            }
        } else {
            templatePages.push(Object.assign(JSON.parse(JSON.stringify(tp)), { texts: [], graphics: [] }));
        }

        const displayMessage = {
            ...this.addService.displayMessage,
            deviceConfig: data.deviceConfig,
            templateId: data.templateId,
            templatePages,
            deviceInfo: {
                width: data.deviceConfig.width,
                height: data.deviceConfig.height
            }
        };
        // this.addService.updateTemplatePages(this.addService.showPage, templatePage);
        this.addService.setDisplayMessage(displayMessage);
    }
}
